<template>
    <div>

        <AddTrackDialog ref="AddTrackDialogRef" :visible="addTrackDialogVisible" :close="closeAddTrack"
                        :callback="addTrack" :options="options"></AddTrackDialog>
        <EditTrackDialog ref="EditTrackDialogRef" :visible="editTrackDialogVisible" :close="closeEditTrack"
                         :callback="editTrack" :options="options"></EditTrackDialog>

        <el-dialog
            @close="ConfirmClose"
            :before-close="handleClose"
            title="Chance Track"
            :visible.sync="visible" width="70%">

            <el-card shadow="never" class="box-card">
                <div slot="header" class="clearfix">
                    <span style="font-weight:bold"> Track </span>

                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddTrackDialog"
                               style="float: right">New
                    </el-button>
                </div>

                <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                          v-loading="this.$store.getters.isLoading" :data="trackTable">
                    <el-table-column
                        type="index"
                        width="90"
                        label="index">
                    </el-table-column>

                    <el-table-column property="trackBusinessType" label="businessType"></el-table-column>
                    <el-table-column property="trackBusinessType" label="businessType"></el-table-column>
                    <el-table-column property="trackDate" label="date"></el-table-column>

                    <el-table-column property="trackMemberSelf" label="memberSelf"></el-table-column>
                    <el-table-column property="trackMemberThird" label="memberThird"></el-table-column>

                    <el-table-column property="trackCommMode" label="commMode"></el-table-column>
                    <el-table-column property="trackAddress" label="address"></el-table-column>

                    <el-table-column property="trackCommSituation" label="commSituation" width="150"></el-table-column>
                    <el-table-column property="trackCommEffect" label="commEffect"></el-table-column>

                    <el-table-column label="operate" width="200">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">Edit
                            </el-button>

                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <div slot="footer">
                <el-button @click="ConfirmClose">Cancel</el-button>
                <el-button type="primary" @click="handleConfirm">Comfirm</el-button>
            </div>


        </el-dialog>
    </div>
</template>

<script>
import AddTrackDialog from "@/views/NPMS/Chance/ChanceManage/Dialog/InnerDialog/AddTrackDialog";
import EditTrackDialog from "@/views/NPMS/Chance/ChanceManage/Dialog/InnerDialog/EditTrackDialog";

export default {
    name: "TrackDialog",
    components: {EditTrackDialog, AddTrackDialog},
    props: ['visible', 'close', 'callback', 'options',],


    data() {
        return {
            //从父组件获得这一行数据的index，方便之后将数据修改传回去
            index: null,
            addTrackDialogVisible: false,
            editTrackDialogVisible: false,
            chanceId: null,
            nextTrackId: 0,

            trackTable: [
                {
                    trackId: 1,
                    chanceName: 'chance name',
                    trackBusinessType: 'xxx',
                    trackDate: 'xxx',
                    trackMemberSelf: 'xxx',
                    trackMemberThird: 'xxx',
                    trackCommMode: 'xxx',
                    trackAddress: 'xxx',
                    trackCommSituation: 'xxx',
                    trackCommEffect: 'xxx',
                }
            ],

        }
    },
    methods: {

        init(chanceId) {
            this.chanceId = chanceId;
            this.loadTrack();

        },

        loadTrack() {

            this.$axios.post(
                '/chance/chance/searchTrack/' + this.chanceId,
            ).then(res => {
                console.log(res)

                this.trackTable = res.data.obj

            });
        },


        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?', {
                confirmButtonText: "confirm",
                cancelButtonText: "cancel"
            })
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },
        ConfirmClose() {
            this.close()
        },


        handleConfirm() {
            this.ConfirmClose();
        },


        //新增机会跟踪窗
        openAddTrackDialog() {
            console.log("open Add Track Dialog");
            this.addTrackDialogVisible = true

            this.$nextTick(() => {
                this.$refs.AddTrackDialogRef.setData(this.chanceId);
            })
            // console.log(this.nextTrackId)
        },

        //修改Track
        handleEdit(index, row) {
            console.log(index, row);
            this.editTrackDialogVisible = true;

            const data = JSON.parse(JSON.stringify(row))

            this.$nextTick(() => {
                this.$refs.EditTrackDialogRef.setData(data, index, this.chanceId);
            })
        },


        //删除Track
        handleDelete(index, row) {

            this.$confirm('Are you sure to delete?', '提示', {
                confirmButtonText: 'Yes',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                console.log(index, row);

                this.$axios.post(
                    '/chance/chance/deleteTrack/' + row.trackId,
                ).then(res => {
                    console.log(res.data)
                    this.$message({
                        type: 'success',
                        message: 'successfully delete!'
                    });
                    this.loadTrack()
                });

            })
        },

        //关闭添加机会跟踪弹窗
        closeAddTrack() {
            this.addTrackDialogVisible = false
        },

        //关闭编辑机会跟踪弹窗
        closeEditTrack() {
            this.editTrackDialogVisible = false


        },

        //添加机会跟踪点击后回调函数
        addTrack() {
            // this.trackTable.push(track)

            this.loadTrack()
            // console.log(track)
        },

        //修改机会跟踪点击后回调函数
        editTrack(track, index) {
            // this.trackTable.splice(index,1,track)

            this.loadTrack()
            console.log(track)
        },


    }
}
</script>

<style scoped>

</style>